<template>
  <!-- 查询条件 -->
  <ZwSearchForm row-num="2" :option="searchOption" @search="search" @reset="reset" />
    <!-- 查询结果 -->
    <ZwTable
      ref="tableRef"
      class="table-box"
      :option="tableOption"
      :fetch-params="state.searchParams"
      :fetch-api="fetchApi()"
      @select="onSelect"
      @selection-change="onSelectionChange"
      @select-all="onSelectAll"
      @currentChange="onCurrentChange"
      @sizeChange="onSizeChange"
    />
</template>

<script setup lang="tsx">
  import { ref, reactive, computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'
  import { deepCopy } from '@/utils/helper'
  import { numFormat } from '@/utils/utils'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  import { getredoacketlist, getredoacketgrant } from '@/api/employe/redmanage/redmanageWord'
  const props = defineProps(['isCompany', 'custList', 'work_user_id'])
  const defaultParams = {
    receive_status: -1,
    grant_time: [],
    grant_user: [props.work_user_id],
    cust_id: +route.query?.id,
    corp_cust_id: +route.query?.id
  }
  const tableRef = ref<HTMLElement | null>(null)
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  const searchOption = [
    {
      label: '联系人',
      name: 'cust_id',
      value: '',
      type: 'select',
      placeholder: '请选择联系人',
      hidden: !props.isCompany, //客户隐藏
      fetchOptionApi: () => Promise.resolve(props.custList),
      formatOption: (v: any) => ({
        label: v.name,
        value: v.cust_id,
        disabled: v.cust_id == 0
      })
    },
    {
      label: '红包状态',
      name: 'receive_status',
      value: '',
      type: 'select',
      placeholder: '全部',
      fetchOptionApi: () => {
        const result = [
          { name: '全部', id: -1 },
          { name: '未领取', id: 1 },
          { name: '已领取', id: 2 },
          { name: '领取失败', id: 3 }
        ]
        return Promise.resolve(result)
      },
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '发送时间',
      name: 'grant_time',
      value: [],
      type: 'datePicker',
      datePickerType: 'daterange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期'
    }
  ]

  const search = (v?: any) => {
    state.searchParams = {
      ...state.searchParams,
      ...v
    }
  }

  const reset = (v?: any) => {
    state.searchParams = deepCopy(defaultParams)
  }
  const tableOption = [
    {
      label: '序号',
      type: 'index',
      width: 80,
      align: 'center'
    },
    {
      label: '红包金额（元）',
      prop: 'grant_amount',
      width: 200
    },
    {
      label: `${props.isCompany ? '联系人' : '领取人'}`,
      prop: `${props.isCompany ? 'contact_name' : 'cust_name'}`
    },
    {
      label: '红包类型',
      prop: 'type'
    },
    {
      label: '红包状态',
      prop: 'receive_status_value'
    },
    {
      label: '领取时间',
      prop: 'receive_time',
      width: 150
    }
    // {
    //   label: '操作',
    //   prop: 'operate',
    //   width: 100,
    //   fixed: 'right',
    //   isOperate: true,
    //   renderOperate({ row }) {
    //     return (
    //       <>
    //         <ElButton
    //           size="small"
    //           vAuth='GRANT'
    //           onClick={()=>onChange(row)}>
    //           提醒
    //         </ElButton>
    //       </>
    //     )

    //   }
    // }
  ]

  const fetchApi = () => {
    // 获取文件列表
    return getredoacketlist
  }
  const onChange = (row: any) => {
    ElMessageBox.confirm(`确定发放当前红包吗？`, 'Warning', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      title: '发放'
    }).then(() => {
      getredoacketgrant({ id: row.id }).then((r: any) => {
        ElMessage.success('发放成功')
        tableRef.value.reload()
      })
    })
  }
</script>
